﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
	Layout = null;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>系统登录 - 企业管理平台</title>
	<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
	@* <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet"> *@
	<style>
		/* 全局样式 */
		body {
			background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
			margin: 0;
			padding: 20px;
			font-family: 'Microsoft YaHei', sans-serif;
		}

		/* 登录卡片样式 */
		.login-card {
			width: 100%;
			max-width: 400px;
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			overflow: hidden;
			transition: all 0.3s ease;
		}

		.login-header {
			padding: 30px 30px 10px;
			text-align: center;
		}

			.login-header h2 {
				color: #4e73df;
				font-size: 24px;
				margin: 0;
			}

			.login-header p {
				color: #999;
				margin: 10px 0 0;
			}

		.login-form {
			padding: 20px 30px 30px;
		}

		/* 表单元素样式 */
		.layui-form-item {
			margin-bottom: 20px;
		}

		.layui-input {
			height: 42px;
			border-radius: 5px;
			padding-left: 40px;
			transition: all 0.3s ease;
		}

			.layui-input:focus {
				border-color: #4e73df !important;
				box-shadow: 0 0 5px rgba(78, 115, 223, 0.3);
			}

		.layui-form-item .layui-icon {
			position: absolute;
			left: 10px;
			top: 12px;
			color: #ccc;
			font-size: 18px;
			transition: color 0.3s ease;
		}

		.layui-input:focus + .layui-icon {
			color: #4e73df;
		}

		/* 按钮样式 */
		.layui-btn {
			height: 42px;
			background-color: #4e73df;
			border-radius: 5px;
			transition: all 0.3s ease;
		}

			.layui-btn:hover {
				background-color: #3a5ec5;
			}

		/* 底部链接 */
		.login-footer {
			padding: 15px 30px;
			background: #f8f9fc;
			text-align: center;
		}

			.login-footer a {
				color: #4e73df;
				margin: 0 10px;
				text-decoration: none;
				transition: color 0.3s ease;
			}

				.login-footer a:hover {
					color: #3a5ec5;
				}
	</style>
</head>
<body>
	<div class="login-card">
		<div class="login-header">
			<h2>企业管理平台</h2>
			<p>请登录您的账户</p>
		</div>

		<form class="layui-form login-form" action="">
			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<i class="layui-icon layui-icon-username"></i>
					<input type="text" name="username" required lay-verify="required" placeholder="用户名" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<i class="layui-icon layui-icon-password"></i>
					<input type="password" name="password" required lay-verify="required" placeholder="密码" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<input type="checkbox" name="remember" title="记住密码" checked>
			</div>

			<div class="layui-form-item">
				<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">
					<i class="layui-icon layui-icon-login"></i> 登录
				</button>
			</div>
		</form>

		<div class="login-footer">
			<a href="#">忘记密码?</a>
			<a href="#">注册账号</a>
		</div>
	</div>
	@* <script src="~/scripts/layui-v2.5.6/layui/layui.all.js"></script>
	<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script> *@
	<script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
	<script>
		layui.use(['form', 'layer'], function(){
			var form = layui.form;
			var layer = layui.layer;

			// 登录提交
			form.on('submit(doLogin)', function (data) {
				var m = data.field; // 拿到表单数据

				$.ajax({
					url: "/MVCLogin/LoginQuery",
					data: m,
					type: "get",
					dataType: "text",
					async: false,
					success: function (a) {
						console.log(a);
						if (a.code == 101) {
							alert(a.message);
						} else if (a.code == 100) {
							alert('登录成功');
							localStorage["name"] = m.u_name;
							// location.href = '/Nlog/mlog_show';
						} else {
							alert(a.message);
						}
					},
					error: function () {
						alert('请求异常，请联系管理员');
					}
				});
				return false; // 阻止表单默认提交
			});

			// // 表单提交事件
			// form.on('submit(login)', function(data){
			// 	// 显示加载状态
			// 	var loading = layer.load(1, {
			// 		shade: [0.5,'#000']
			// 	});

			// 	// 模拟登录请求
			// 	setTimeout(function(){
			// 		layer.close(loading);

			// 		// 登录成功
			// 		layer.msg('登录成功', {
			// 			icon: 1,
			// 			time: 1000
			// 		}, function(){
			// 			// 跳转到首页或其他页面
			// 			// window.location.href = 'index.html';
			// 		});
			// 	}, 1500);

			// 	return false; // 阻止表单跳转
			// });

			// 表单验证
			form.verify({
				username: function(value){
					if(value.length < 3){
						return '用户名至少3个字符';
					}else if(value.length>=0){
						return '密码不能为空'
					}
				},
				password: function(value){
					if(value.length < 6){
						return '密码长度不能小于6位';
					}else if(value.length>=0){
						return '密码不能为空'
					}
				}
			});
		});
	</script>
</body>
</html>
